<template>
  <div class="gallery-container" :class="`view-${currentView}`">
    <!-- 顶部导航栏 -->
    <header class="gallery-header">
      <div class="header-content">
        <div class="home-icon" @click="goToHome" title="返回主页">
            <i class="fas fa-home"></i>
        </div>
        <h1 class="gallery-title">光影记忆</h1>
        <div class="view-controls">
          <button 
            v-for="view in availableViews" 
            :key="view.id"
            :class="['view-btn', { active: currentView === view.id }]"
            @click="changeView(view.id)"
            :title="view.name"
          >
            <i :class="view.icon"></i>
          </button>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="gallery-main">
      <!-- 网格视图 -->
      <div v-if="currentView === 'grid'" class="grid-view">
        <div 
          v-for="(photo, index) in photos" 
          :key="photo.id" 
          class="photo-card"
          @click="openLightbox(index)"
        >
          <img :src="photo.thumbnail" :alt="photo.title" class="photo-image">
          <div class="photo-overlay">
            <h3 class="photo-title">{{ photo.title }}</h3>
            <p class="photo-date">{{ formatDate(photo.date) }}</p>
          </div>
        </div>
      </div>
      
      <!-- 瀑布流视图 -->
      <div v-if="currentView === 'masonry'" class="masonry-view">
        <div 
          v-for="(photo, index) in photos" 
          :key="photo.id" 
          class="masonry-item"
          :style="{ '--item-height': photo.aspectRatio > 1 ? '300px' : '400px' }"
          @click="openLightbox(index)"
        >
          <img :src="photo.thumbnail" :alt="photo.title" class="masonry-image">
          <div class="photo-info">
            <h3>{{ photo.title }}</h3>
            <p>{{ photo.location }}</p>
          </div>
        </div>
      </div>
      
      <!-- 列表视图 -->
      <div v-if="currentView === 'list'" class="list-view">
        <div 
          v-for="(photo, index) in photos" 
          :key="photo.id" 
          class="list-item"
          @click="openLightbox(index)"
        >
          <img :src="photo.thumbnail" :alt="photo.title" class="list-image">
          <div class="list-details">
            <h3>{{ photo.title }}</h3>
            <p class="meta">
              <span><i class="fas fa-calendar-alt"></i> {{ formatDate(photo.date) }}</span>
              <span><i class="fas fa-map-marker-alt"></i> {{ photo.location }}</span>
            </p>
            <p class="description">{{ photo.description }}</p>
          </div>
        </div>
      </div>
      
      <!-- 全屏轮播视图 -->
      <div v-if="currentView === 'carousel'" class="carousel-view">
        <div class="carousel-container">
          <button class="nav-btn prev" @click="prevPhoto">
            <i class="fas fa-chevron-left"></i>
          </button>
          
          <div class="carousel-slide">
            <img 
              :src="photos[currentIndex].image" 
              :alt="photos[currentIndex].title" 
              class="carousel-image"
            >
            <div class="carousel-caption">
              <h2>{{ photos[currentIndex].title }}</h2>
              <p>{{ photos[currentIndex].location }} · {{ formatDate(photos[currentIndex].date) }}</p>
            </div>
          </div>
          
          <button class="nav-btn next" @click="nextPhoto">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
        <div class="carousel-thumbnails">
          <div 
            v-for="(photo, index) in photos" 
            :key="photo.id" 
            :class="['thumbnail', { active: currentIndex === index }]"
            @click="goToPhoto(index)"
          >
            <img :src="photo.thumbnail" :alt="photo.title">
          </div>
        </div>
      </div>
    </main>
    
    <!-- 图片灯箱 -->
    <div v-if="showLightbox" class="lightbox" @click.self="closeLightbox">
      <button class="lightbox-close" @click="closeLightbox">
        <i class="fas fa-times"></i>
      </button>
      <button class="lightbox-nav prev" @click.stop="prevPhoto">
        <i class="fas fa-chevron-left"></i>
      </button>
      
      <div class="lightbox-content">
        <img 
          :src="photos[lightboxIndex].image" 
          :alt="photos[lightboxIndex].title" 
          class="lightbox-image"
        >
        <div class="lightbox-info">
          <h3>{{ photos[lightboxIndex].title }}</h3>
          <p class="meta">
            <span><i class="fas fa-calendar-alt"></i> {{ formatDate(photos[lightboxIndex].date) }}</span>
            <span><i class="fas fa-map-marker-alt"></i> {{ photos[lightboxIndex].location }}</span>
            <span><i class="fas fa-camera"></i> {{ photos[lightboxIndex].camera }}</span>
          </p>
          <p class="description">{{ photos[lightboxIndex].description }}</p>
        </div>
      </div>
      
      <button class="lightbox-nav next" @click.stop="nextPhoto">
        <i class="fas fa-chevron-right"></i>
      </button>
    </div>
    
    <!-- 页脚 -->
    <footer class="gallery-footer">
      <p>© 2023 光影记忆 · 用镜头记录生活</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 导航功能
const goToHome = () => {
  router.push('/')
}

// 照片数据
const photos = ref([
  {
    id: 1,
    title: '晨曦海岸',
    description: '清晨的第一缕阳光洒在海面上，波光粼粼，海鸥掠过水面，带来一天的希望。',
    location: '三亚, 中国',
    date: new Date('2023-05-12'),
    camera: 'Sony A7R IV',
    image: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=400',
    aspectRatio: 1.5
  },
  {
    id: 2,
    title: '雪山之巅',
    description: '海拔4500米的雪山峰顶，云海在脚下翻滚，仿佛置身仙境。',
    location: '阿尔卑斯山, 瑞士',
    date: new Date('2022-11-20'),
    camera: 'Canon EOS R5',
    image: 'https://images.unsplash.com/photo-1682695796954-bad0d0f59ff1?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682695796954-bad0d0f59ff1?w=400',
    aspectRatio: 0.8
  },
  {
    id: 3,
    title: '城市夜景',
    description: '城市灯火通明，车流如织，现代都市的繁华与活力。',
    location: '上海, 中国',
    date: new Date('2023-03-15'),
    camera: 'Nikon Z7 II',
    image: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=400',
    aspectRatio: 1.2
  },
  {
    id: 4,
    title: '秋日森林',
    description: '金黄的落叶铺满小径，阳光透过树叶洒下斑驳的光影。',
    location: '京都, 日本',
    date: new Date('2022-10-05'),
    camera: 'Fujifilm X-T4',
    image: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=400',
    aspectRatio: 1.8
  },
  {
    id: 5,
    title: '沙漠星空',
    description: '无垠的沙漠中，银河清晰可见，繁星点点，宇宙的浩瀚令人震撼。',
    location: '撒哈拉沙漠, 摩洛哥',
    date: new Date('2023-01-28'),
    camera: 'Sony A7S III',
    image: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=400',
    aspectRatio: 1.3
  },
  {
    id: 6,
    title: '古镇小巷',
    description: '青石板路，白墙黑瓦，古镇的宁静与历史感扑面而来。',
    location: '乌镇, 中国',
    date: new Date('2023-04-18'),
    camera: 'Leica Q2',
    image: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=400',
    aspectRatio: 0.9
  },
  {
    id: 7,
    title: '野生动物',
    description: '非洲草原上的猎豹，优雅而矫健，大自然最完美的猎手。',
    location: '塞伦盖蒂, 坦桑尼亚',
    date: new Date('2022-08-30'),
    camera: 'Canon EOS-1D X Mark III',
    image: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682686580391-615b3f4e56a8?w=400',
    aspectRatio: 1.6
  },
  {
    id: 8,
    title: '极光幻境',
    description: '北极光在夜空中舞动，绿色与紫色的光带交织，如梦如幻。',
    location: '特罗姆瑟, 挪威',
    date: new Date('2022-12-15'),
    camera: 'Nikon D850',
    image: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=1200',
    thumbnail: 'https://images.unsplash.com/photo-1682695797221-8164ff1fafc9?w=400',
    aspectRatio: 1.4
  }
])

// 视图模式
const availableViews = ref([
  { id: 'grid', name: '网格视图', icon: 'fas fa-th' },
  { id: 'masonry', name: '瀑布流', icon: 'fas fa-th-large' },
  { id: 'list', name: '列表视图', icon: 'fas fa-list' },
  { id: 'carousel', name: '轮播展示', icon: 'fas fa-images' }
])

const currentView = ref('grid')

// 切换视图
const changeView = (view) => {
  currentView.value = view
  // 重置轮播索引
  if (view === 'carousel') {
    currentIndex.value = 0
  }
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  })
}

// 灯箱控制
const showLightbox = ref(false)
const lightboxIndex = ref(0)

const openLightbox = (index) => {
  lightboxIndex.value = index
  showLightbox.value = true
  document.body.style.overflow = 'hidden'
}

const closeLightbox = () => {
  showLightbox.value = false
  document.body.style.overflow = ''
}

const prevPhoto = () => {
  if (currentView.value === 'carousel') {
    currentIndex.value = (currentIndex.value - 1 + photos.value.length) % photos.value.length
  } else {
    lightboxIndex.value = (lightboxIndex.value - 1 + photos.value.length) % photos.value.length
  }
}

const nextPhoto = () => {
  if (currentView.value === 'carousel') {
    currentIndex.value = (currentIndex.value + 1) % photos.value.length
  } else {
    lightboxIndex.value = (lightboxIndex.value + 1) % photos.value.length
  }
}

const goToPhoto = (index) => {
  if (currentView.value === 'carousel') {
    currentIndex.value = index
  } else {
    lightboxIndex.value = index
  }
}

// 轮播视图控制
const currentIndex = ref(0)

// 键盘导航
onMounted(() => {
  window.addEventListener('keydown', (e) => {
    if (showLightbox.value) {
      if (e.key === 'Escape') {
        closeLightbox()
      } else if (e.key === 'ArrowLeft') {
        prevPhoto()
      } else if (e.key === 'ArrowRight') {
        nextPhoto()
      }
    }
  })
})
</script>

<style scoped>
.gallery-container {
  --primary-color: #6d4c41;
  --secondary-color: #8d6e63;
  --accent-color: #a1887f;
  --light-color: #efebe9;
  --dark-color: #3e2723;
  --text-color: #5d4037;
  --text-light: #8d6e63;
  --bg-color: #efebe9;
  --card-bg: #ffffff;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  flex-direction: column;
}

.gallery-header {
  background-color: var(--primary-color);
  color: white;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
    transition: var(--transition);
}

.home-icon i {
    font-size: 1.8rem;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: var(--transition);
}

.home-icon:hover i {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.gallery-title {
  margin: 0;
  font-weight: 300;
  font-size: 1.8rem;
  letter-spacing: 1px;
}

.view-controls {
  display: flex;
  gap: 10px;
}

.view-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.view-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.view-btn.active {
  background: white;
  color: var(--primary-color);
}

.gallery-main {
  flex: 1;
  padding: 30px 20px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* 网格视图样式 */
.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.photo-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  aspect-ratio: 4/3;
}

.photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
  opacity: 0;
  transition: var(--transition);
}

.photo-card:hover .photo-overlay {
  opacity: 1;
}

.photo-title {
  margin: 0 0 5px 0;
  font-size: 1.2rem;
}

.photo-date {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 瀑布流视图样式 */
.masonry-view {
  column-count: 3;
  column-gap: 20px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  height: var(--item-height);
}

.masonry-item:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.masonry-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-info {
  padding: 15px;
  background: var(--card-bg);
}

.photo-info h3 {
  margin: 0 0 5px 0;
  color: var(--text-color);
}

.photo-info p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* 列表视图样式 */
.list-view {
  max-width: 800px;
  margin: 0 auto;
}

.list-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.list-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.list-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}

.list-details {
  padding: 20px;
  flex: 1;
}

.list-details h3 {
  margin: 0 0 10px 0;
  color: var(--text-color);
}

.meta {
  display: flex;
  gap: 15px;
  margin: 0 0 10px 0;
  color: var(--text-light);
  font-size: 0.9rem;
}

.meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.description {
  margin: 0;
  color: var(--text-color);
  line-height: 1.6;
}

/* 轮播视图样式 */
.carousel-view {
  width: 100%;
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.carousel-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
}

.nav-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.carousel-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  text-align: center;
}

.carousel-caption h2 {
  margin: 0 0 5px 0;
  font-weight: 300;
  font-size: 2rem;
}

.carousel-caption p {
  margin: 0;
  opacity: 0.8;
}

.carousel-thumbnails {
  display: flex;
  gap: 10px;
  padding: 15px;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.1);
}

.thumbnail {
  width: 80px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: var(--transition);
  border: 2px solid transparent;
}

.thumbnail:hover {
  opacity: 0.9;
}

.thumbnail.active {
  opacity: 1;
  border-color: var(--primary-color);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 灯箱样式 */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}

.lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav.prev {
  left: 30px;
}

.lightbox-nav.next {
  right: 30px;
}

.lightbox-content {
  width: 100%;
  height: 100%;
  display: flex;
  max-width: 1200px;
}

.lightbox-image {
  flex: 1;
  object-fit: contain;
  max-height: 100%;
}

.lightbox-info {
  width: 300px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  overflow-y: auto;
}

.lightbox-info h3 {
  margin: 0 0 15px 0;
  font-size: 1.5rem;
  font-weight: 300;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0 0 20px 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

.meta span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.description {
  margin: 0;
  line-height: 1.6;
}

.gallery-footer {
  text-align: center;
  padding: 20px;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .masonry-view {
    column-count: 2;
  }
  
  .lightbox-content {
    flex-direction: column;
  }
  
  .lightbox-image {
    width: 100%;
    flex: none;
  }
  
  .lightbox-info {
    width: 100%;
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .gallery-title {
    order: -1;
  }
  
  .grid-view {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  
  .masonry-view {
    column-count: 1;
  }
  
  .list-item {
    flex-direction: column;
  }
  
  .list-image {
    width: 100%;
    height: 200px;
  }
  
  .carousel-caption h2 {
    font-size: 1.5rem;
  }
  
  .carousel-caption p {
    font-size: 0.9rem;
  }
  
  .lightbox {
    padding: 10px;
  }
  
  .lightbox-close {
    top: 10px;
    right: 10px;
  }
  
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .lightbox-nav.prev {
    left: 10px;
  }
  
  .lightbox-nav.next {
    right: 10px;
  }
}
</style>